<template>
	<view class="dept">
		<view class="u-dept-nav">
			<u-icon name="arrow-down" size="14" label="长春" labelPos="left"></u-icon>
			<u-button class="login-btn-bg custom-style" @click="close" shape="circle">返回</u-button>
		</view>
		<view class="deptListContainer">
			<view class="l-search">
				<u-input shape="circle" placeholder="请输入小区名称" v-model="keyword"></u-input>
				<view class="l-search-btn"></view>
			</view>
			<view class="collapse">
				<!-- <u-collapse :border="false"> -->
					<!-- <u-collapse-item v-for="item in deptListFilter" :title="item.regionName">
						<view class="u-collapse-content"> -->
							<view class="collapse-list border_line" v-for="item in deptListFilter" @click="choseDept(item.id)">
								<text>{{item.xqName}}</text>
							</view>
						<!-- </view>
					</u-collapse-item> -->
				<!-- </u-collapse> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getQuartersList
	} from '@/libs/request/api'
	export default {
		data() {
			return {
				keyword: '',
				deptList: []
			};
		},
		created() {
			this.geList();
		},
		computed: {
			deptListFilter() {
				console.log(this.keyword)
				let newList = [];
				// if(this.keyword) {
				// 	this.deptList.filter(el => {
				// 		el.quartersVoList.filter(el1 => {
				// 			el1.xqName.includes(this.keyword)
				// 		})
				// 	})
				// }
				return this.deptList
			}
		},
		methods: {
			geList(){
				getQuartersList('2201').then(res => {
					this.deptList = res.data
				})
			},
			choseDept(val) {
				this.$emit('closeDeptList',val)
			},
			close() {
				this.$emit('closeDeptList')
			}
		}
	}
</script>

<style lang="scss">
	.u-page {
		padding-top: 0;
	}
	.dept {
		position: fixed;
		top: calc(var(--window-bottom) + var(--status-bar-height) + var(--window-top));
		left: 0;
		width: 100%;
		height: 100vh;
		background: #f8f8f8;
		z-index: 100;
		display: flex;
		flex-direction: column;
		z-index: 100;
	}
	.u-dept-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 30rpx;
		background: #ffffff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}
	.custom-style {
		width: 140rpx;
		margin: 0;
		color: #ffffff;
		height: 62rpx !important;
	}
	.deptListContainer {
		height: 100%;
		padding: 90rpx 30rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
	.dept-border{
		border-top: 1rpx solid #e6e6e6;
	}
	.l-search {
		position: relative;
		margin: 27rpx 0;
		.u-input {
			flex: 1;
			background: #ffffff;
			border: none;
			padding: 22rpx 48rpx 22rpx 18rpx;
		}
		&-btn {
			position: absolute;
			right: 40rpx;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 34rpx;
			height: 34rpx;
			background: url('@/static/icon-search.png') no-repeat center;
			background-size: 100% 100%;
		}
	}
	.collapse {
		flex: 1 1;
		overflow: auto;
		/deep/ .u-collapse-item {
			margin-bottom: 7rpx;
		}
		/deep/ .u-cell__title-text {
			font-size: 32rpx;
		}
		/deep/ .u-cell {
			background-color: #fff;
			border-radius: 16rpx;
		}
		&-list {
			color: $uni-text-color;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 10rpx;
		}
	}
	
	.border_line{
		border-bottom: 1px solid $l-grey;
	}
</style>
